<template>
  <div class="" style="min-height: 100%; background-color: #ddd">
    <!-- 置顶图片 -->
    <div style="height: 200px">
      <img
        src="@/assets/goodsDetail_top.jpg"
        alt=""
        style="width: 100%; height: 100%"
      />
    </div>

    <!-- 面包屑 -->
    <div style="width: 80%; margin: 20px auto 0">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/front/home' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/front/goodsList' }"
          >产物列表</el-breadcrumb-item
        >
        <el-breadcrumb-item>产物信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 产物信息 -->
    <div
      style="
        width: 70%;
        padding: 20px;
        margin: 30px auto;
        border: 3px solid #eee;
        border-radius: 10%;
      "
    >
      <!-- 头像 -->
      <div
        style="
          display: inline-block;
          vertical-align: top;
          width: 30%;
          aspect-ratio: 1/1;
          border-radius: 50%;
          border: 2px solid #f2d070;
        "
      >
        <img
          v-if="goods.avatarUrl"
          :src="goods.avatarUrl"
          alt=""
          style="width: 100%; border-radius: 50%"
        />
        <img
          v-else
          src="@/assets/logo1.png"
          alt=""
          style="width: 100%; border-radius: 50%"
        />
      </div>

      <!-- 详细信息 -->
      <div
        style="
          width: 60%;
          display: inline-block;
          vertical-align: top;
          margin-left: 6%;
        "
      >
        <el-descriptions
          :column="2"
          border
          size="medium"
          :labelStyle="{
            backgroundColor: '#ddd',
            fontSize: '20px',
            width: '20%'
          }"
          :contentStyle="{ backgroundColor: '#ddd', fontSize: '20px' }"
        >
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-edit"></i>
              产物名
            </template>
            {{ goods.goodsName }}
          </el-descriptions-item>
          <el-descriptions-item :span="1">
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              产地
            </template>
            {{ sourceName }}
          </el-descriptions-item>
          <el-descriptions-item label="分类" :span="1">
            <template slot="label">
              <i class="el-icon-fenlei"></i>
              分类
            </template>
            {{ goodstypeName }}
          </el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            <template slot="label">
              <i class="el-icon-beizhu"></i>
              备注
            </template>
            {{ goods.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <footer
      style="height: 150px; background-color: rgba(0, 0, 0, 0.8)"
    ></footer>
  </div>
</template>

<script>
export default {
  name: 'FrontGoodsDetail',
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      goods: {},
      goodstypeData: [],
      sourceData: []
    }
  },
  beforeMount() {
    this.getGoods()
    this.loadGoodstype()
    this.loadSource()
  },
  computed: {
    sourceName() {
      let temp = this.sourceData.find(item => {
        return item.id == this.goods.sourceId
      })

      return temp && temp.sourceName
    },
    goodstypeName() {
      let temp = this.goodstypeData.find(item => {
        return item.id == this.goods.goodsTypeId
      })

      return temp && temp.goodsTypeName
    }
  },
  methods: {
    getGoods() {
      this.$http.get('/goods/' + this.id).then(res => {
        console.log('获取的产物数据为：', res)
        if (res) {
          this.goods = res
        } else {
          this.$message.error('获取数据失败！')
        }
      })
    },
    loadGoodstype() {
      this.$http.get('/goodstype/list').then(res => {
        if (res.code == 200) {
          this.goodstypeData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    },
    loadSource() {
      this.$http.get('/source/list').then(res => {
        if (res.code == 200) {
          this.sourceData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    }
  }
}
</script>

<style scoped></style>
